import React, { useState } from "react";
import style from "./style.module.scss";
import { MyMack, MyNavBar } from "../../../components";
import { useNavigate } from "react-router-dom";
import myIconNext from "../../../assets/images/icon/common resource/hdpi/my_icon_next_n.png";
import commonIconBoy from "../../../assets/images/icon/common resource/hdpi/common_icon_boy_n.png";
import commonIconGirl from "../../../assets/images/icon/common resource/hdpi/common_icon_girl_n.png";
import { useRequest } from "ahooks";
import { getUserInfoById } from "../../../api/my";
import { useAppSelector } from "../../../store/hooks";

const Index: React.FC = () => {
  const navigate = useNavigate();
  const userId = useAppSelector((state) => state.user.userInfo.userId);
  const sessionId = useAppSelector((state) => state.user.userInfo.sessionId);
  const [isFlag, setIsFlag] = useState(false);
  const { data: userInfo = [], run } = useRequest(async () => {
    const resp = await getUserInfoById(userId, sessionId);
    return resp.result;
  });

  const handelConfirm = () => {
    setIsFlag(false);
    run();
  };

  return (
    <div className={style.personInfomation}>
      <MyNavBar
        title="个人信息页"
        style={{ backgroundColor: "#fff" }}
        onClickLeft={() => navigate(-1)}
      ></MyNavBar>
      <div className={style.personInfomation_conent}>
        {/* 头像_昵称 */}
        <div className={style.avatar_nickname}>
          {/* 头像 */}
          <div className={style.avatar}>
            <div>头像</div>
            <img
              src={userInfo.headPic}
              alt=""
              onClick={() => {
                setIsFlag(true);
              }}
            />
          </div>
          {/* 昵称 */}
          <div
            className={style.nickname}
            onClick={() => navigate("/set/nickname")}
          >
            <div>昵称</div>
            <div className={style.nickname_box}>
              <div>{userInfo.nickName}</div>
              <img src={myIconNext} alt="" />
            </div>
          </div>
        </div>
        {/* 性别_体征 */}
        <div className={style.sex_sign}>
          {/* 性别 */}
          <div
            className={style.sex}
            onClick={() => navigate("/set/choose/gender")}
          >
            <div>性别</div>
            <div className={style.sex_box}>
              {userInfo.sex === 1 ? (
                <img
                  src={commonIconBoy}
                  alt=""
                  className={style.commonIconSex}
                />
              ) : (
                <img
                  src={commonIconGirl}
                  alt=""
                  className={style.commonIconSex}
                />
              )}
              <img src={myIconNext} alt="" className={style.myIconNext} />
            </div>
          </div>
          {/* 体征 */}
          <div
            className={style.sign}
            onClick={() => navigate("/set/my/physical/signs")}
          >
            <div>体征</div>
            <div className={style.sign_box}>
              <div className={style.height}>
                <div>身高</div>
                <div>{userInfo.height}cm</div>
              </div>
              <div className={style.weight}>
                <div>体重</div>
                <div>{userInfo.weight}kg</div>
              </div>
              <div className={style.age}>
                <div>年龄</div>
                <div>{userInfo.age}</div>
              </div>
              <img src={myIconNext} alt="" />
            </div>
          </div>
        </div>
        {/* 邮箱_微信 */}
        <div className={style.mailbox_wechat}>
          {/* 邮箱 */}
          <div className={style.mailbox}>
            <div>邮箱</div>
            <div>{userInfo.email}</div>
          </div>
          {/* 绑定微信 */}
          <div className={style.wechat}>
            <div>绑定微信</div>
            <div className={style.wechat_box}>
              <div>去绑定</div>
              <img src={myIconNext} alt="" />
            </div>
          </div>
        </div>
        {/* 实名_银行卡 */}
        <div className={style.realName_bankCard}>
          {/* 实名认证 */}
          <div
            className={style.realName}
            onClick={() => navigate("/set/realname/authentication")}
          >
            <div>实名认证</div>
            <div className={style.realName_box}>
              <div>去认证</div>
              <img src={myIconNext} alt="" />
            </div>
          </div>
          {/* 绑定银行卡 */}
          <div
            className={style.bankCard}
            onClick={() => navigate("/set/bind/bank/card")}
          >
            <div>绑定银行卡</div>
            <div className={style.bankCard_box}>
              <div>去绑定</div>
              <img src={myIconNext} alt="" />
            </div>
          </div>
        </div>
        {/* 底部空白 */}
        <div className={style.footer}></div>
      </div>
      {/* 蒙层 */}
      {isFlag && (
        <MyMack
          onCancel={() => setIsFlag(false)}
          onConfirm={() => handelConfirm()}
        ></MyMack>
      )}
    </div>
  );
};

export default Index;
